import React, {useEffect, useState} from 'react'
import Header from './components/Header'
import MainNav from './components/MainNav'
import Footer from './components/Footer'
import MusicPlay from './pages/MusicPlay'
import {Outlet, useLocation, useNavigate} from 'react-router-dom'

export default function App() {
    const [SongList, setSongList] = useState({})
    let {pathname} = useLocation()
    const navigate = useNavigate()
    useEffect(() => {
        const Play = [JSON.parse(localStorage.getItem('MUSIC'))]
        setSongList(Play)
        if (pathname === '/') {
            navigate('/anchor')
        }
    }, [])   //默认跳转home页面

    return (
        <div>
            <Header></Header>
            <MainNav></MainNav>
            <Outlet></Outlet>
            {pathname === '/hotsearch' ? null : (<Footer></Footer>)}
            <MusicPlay tracks={SongList}></MusicPlay>
        </div>
    )
}

